<script setup lang="ts">
import {PropType, reactive, ref, h} from 'vue'
import "@/styles/menu.css"
import selected from "@/assets/home/selected.png"
import selectedAll from "@/assets/home/selectedAll.png"
import enclosure from "@/assets/home/enclosure.png"
import edit from "@/assets/home/edit.png"
import remove from "@/assets/home/remove.png"
import settings from "@/assets/home/settings.png"
import {createPopup} from "@/utils/gps/createPopup";
import EnclosureSettings from "@/components/map/controlChild/enclosureSettings/index.vue"


const props = defineProps({
  imei: {
    type: String,
  },
  menuGroups: {
    type: Array as PropType<ItemName[]>,
    required: true
  }
})

const emits = defineEmits(["addedFences", "modifyTheFence", "removeFences"])

export type ItemName = "select" | "selectDeep" | "addedFences" | "modifyTheFence" | "removeFences" | "fenceSettings"
type Menu = {
  [key in ItemName]: {
    label: string,
    icon: string,
    handler: (...args: any) => void,
  }
}

const menuConfig = reactive<Menu>({
  addedFences: {
    label: "新增围栏",
    icon: enclosure,
    handler: ()=> emits("addedFences")
  },
  modifyTheFence: {
    label: "编辑围栏",
    icon: edit,
    handler: ()=> emits("modifyTheFence")
  },
  select: {
    label: "勾选子级",
    icon: selected,
    handler: selectAll
  },
  selectDeep: {
    label: "勾选全部",
    icon: selectedAll,
    handler: selectAllDeep
  },
  removeFences: {
    label: "删除围栏",
    icon: remove,
    handler: () => emits("removeFences")
  },
  fenceSettings:{
    label: "围栏设置",
    icon: settings,
    handler: openEnclosureSettings
  }
})

/**
 * 选中全部
 */
function selectAll(){

}

/**
 * 选中全部（含子级）
 */
function selectAllDeep(){

}

function openEnclosureSettings(){
  createPopup({
    default: (close)=> h(EnclosureSettings, {
      onClose: close
    })
  }, {
    noHeader: true,
    rootElStyle: "min-width: 800px; min-height: 400px"
  })
}
</script>

<template>
  <div id="right_click_menu">
    <ul>
      <li v-for="item in menuGroups" :key="item" @click="menuConfig[item].handler">
        <img :src="menuConfig[item].icon" :alt="menuConfig[item].label"/><span>{{menuConfig[item].label}}</span>
      </li>
    </ul>
  </div>
</template>

<style scoped>
#right_click_menu {
  position: absolute;
  top: 300px;
  left: 20px;
  background-color: white;
  z-index: 100;
  box-shadow:
      0 12px 32px 4px rgba(0, 0, 0, 0.04),
      0 8px 20px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 5px 0;
  min-width: 120px;
}
li {
  list-style: none;
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
li span {
  color: #0a0a0a;
}
li i {
  margin-right: 8px;
  transform: translateY(2px);
}
li:hover {
  background-color: rgb(206, 228, 225);
  color: #006fff;
}
li img{
  height: 16px;
  width: 16px;
  margin-right: 8px;
}
</style>
